<template>
    <div id="rankpage">
        <!--歌单页面的大图片显示-->


        <div class="header-bar" :style="{background:background}">
            <div class="back-button" @click="hideSinger"><<<    排行榜</div>

        </div>


        <img v-lazy="imgurl" alt="singerphoto">


        <br><br><br>
        <div class="list-title">
            <div>
                <h1> {{topListData.topinfo.ListName}} </h1>
                <p>{{topListData.topinfo.listennum | listenCount}}</p>
            </div>

            &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
            <div class="play-button" @click="play(0)">
                <img src="../assets/icon-play.png">
            </div>
        </div>
        <div class="list-number"></div>
        <div class="list" :style="{background:color}">
            <ul>
                <li class="border-1px border-1px-after" v-for="(item,index) in topListData.songlist">

                    <div class="index">
                        {{index+1}}
                    </div>
                    <div class="info" @click="play(index)">
                        <div class="name">
                            {{item.data.songorig}}
                        </div>
                        <div class="singer">
                            <span v-for="singername in item.data.singer">{{singername.name}}-</span>
                            <span>{{item.data.albumname}}</span>
                        </div>
                    </div>

                </li>

            </ul>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">

    export default {
        data () {
            return {
                topListData: null,
                opacity: 0,
                menuedIndex: 0,
                topid:this.$route.params.id
            }
        },
        methods:{
            hideSinger:function(){
                this.$router.go(-1)
            },
            play: function (index) {
                let list = []
                this.topListData.songlist.forEach(item => {
                    list.push({
                        id: item.data.songid,
                        mid: item.data.songmid,
                        name: item.data.songorig,
                        singer: item.data.singer,
                        albummid: item.data.albummid
                    })
                })
                this.$store.commit('setPlayList', {
                    index: index,
                    list: list
                })
                this.$store.commit('play')
            },
        },

        computed:{

            imgurl: function () {
                if (this.topListData !== null) {
                    return this.topListData.topinfo.pic_album
                }
            },

        },
        created: function () {
            this.$store.dispatch('getRankSongs',this.topid).then((response) => {
                this.topListData = response.data
            })

            let that = this
            window.onscroll = function () {
                if (document.getElementById('singer-header')) {
                    that.opacity = window.pageYOffset / document.getElementById('singer-header').offsetHeight
                } else {
                    that.opacity = 0
                }
            }
        },
        filters: {
            listenCount: num=> {
                return Math.round(num / 1000) / 10 + '万'
            }
        },




    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    * {
        margin: 0;
        padding: 0;
    }

    .tab-swiper {
        background-color: #fff;
        height: 100px;
    }

    /*border-1px 部分*/
    .border-1px {
        position: relative;
    }

    .border-1px-after:after {
        border-top: 1px solid rgba(255, 255, 255, .15);
        content: ' ';
        display: block;
        width: 100%;
        position: absolute;
        left: 0;
    }

    .border-1px-before:before {
        border-top: 1px solid rgba(255, 255, 255, .15);
        content: ' ';
        display: block;
        width: 80%;
        position: absolute;
        left: 0;
    }

    .border-1px:before {
        top: 0;
    }

    .border-1px:after {
        bottom: 0;
    }

    @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
        .border-1px:after, .border-1px:before {
            -webkit-transform: scaleY(.7);
            -webkit-transform-origin: 0 0;
            transform: scaleY(.7);
        }

        .border-1px:after {
            -webkit-transform-origin: left bottom;
        }
    }

    @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
        .border-1px:after, .border-1px:before {
            -webkit-transform: scaleY(.5);
            transform: scaleY(.5);
        }
    }

    #rankpage {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 68vh;
        min-height: 100%;
        overflow-x: hidden;
        position: absolute;
        top: 0;
        background: #fff;
        z-index: 2;
    }

    .singer-photo {
        position: fixed;
        width: 100%;
        max-width: 68vh;
        height: 100vw;
        max-height: 68vh;
    }

    .singer-photo img {
        width: 100%;
        max-width: 68vh;
        height: 100vw;
        max-height: 68vh;
    }

    .header-bar {
        position: fixed;
        top: 0;
        height: 50px;
        width: 100%;
        max-width: 68vh;
        z-index: 2;
    }

    .header-bar .back-button {
        /*    width:25px;*/
        height: 25px;
        margin: 12.5px;
        margin-left: 5px;
        float: left;
        cursor:pointer;
        color:lightskyblue;
    }


    .header-bar .back-button .back-icon {
        width: 25px;
        height: 25px;
        float: left;
    }

    .header-bar .back-button .back-icon img {
        width: 25px;
    }

    .header-bar .back-button .back-text {
        line-height: 25px;
        float: left;
    }

    .header {
        width: 100%;
        max-width: 68vh;
        height: 100vw;
        max-height: 68vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .header-blank {
        display: flex;
        flex-grow: 1;
    }

    .header-warp {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        /*background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgb(135, 112, 101));*/
    }

    .header-warp .play-button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 1px solid #eee;
        background: rgba(255, 255, 255, 0.43);
    }

    .header-warp .play-button img {
        display: inline-block;
        width: 25px;
        height: 25px;
    }

    .list {
        /*background: rgb(135, 112, 101);*/
        z-index: 1;
        padding-bottom: 50px;
    }

    .list .list-title {
        text-align: center;
        line-height: 40px;
    }

    .list ul {
        list-style: none;
        padding-left: 10px;
    }

    .list ul li {
        display: flex;
        display: -webkit-flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        height: 60px;
        margin-left:44px;
        cursor:pointer;
    }

    .list ul li .music-index{
        margin-left: -50px;
        width: 50px;
        text-align: center;
    }

    .list ul li .music-info {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        overflow: hidden;
    }

    .list ul li .music-info .music-name {
        width: 100%;
        color: #000;
        line-height: 22px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .dark {
        color: #fff !important;
    }

    .list ul li .music-info .music-singer {
        color: #aaa;
        font-size: 14px;
        line-height: 22px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .list ul li .action-button {
        width: 25px;
        height: 25px;
        margin-right: 10px;
    }

    .list ul li .action-button img {
        width: 25px;
        height: 25px;
    }

    .list .singer-brief {
        font-size: 14px;
        padding: 10px;
    }
    ul{
        border: solid 1px deepskyblue;
    }
    .index{
        float:left;
    }
    .info{
        float:left;
    }
    .list-title .play-button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 1px solid #eee;
        background: rgba(255, 255, 255, 0.43);
    }

    .list-title .play-button img {
        display: inline-block;
        width: 25px;
        height: 25px;
    }
    .list ul li .info {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        overflow: hidden;
    }
    .list ul li .info .name {
        width: 100%;
        color: #000;
        line-height: 22px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    .list ul li .info .singer {
        color: #aaa;
        font-size: 14px;
        line-height: 22px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
</style>
